<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	div{
		padding:10px;
	}
	#div1{
		background-color: #00f;
		color:#fff;
		font-size: larger;
		position: absolute;
		width: 400px;
		height: 200px;
		left: -410px;
		top: -400px;
	}
	#div2{
		background-color: #ff0;
		color:#000;
		font-size: larger;
		position: absolute;
		width: 400px;
		height: 200px;
		left: -410px;
		top: -400px;
	}
	#div3{
		background-color: #f00;
		color:#fff;
		font-size: larger;
		position: absolute;
		width: 400px;
		height: 200px;
		left: -410px;
		top: -400px;
	}
</style>
	
<script>
	var x=0;
	var y=0;
	var elem=0;
	var elems=["div1","div2","div3"];
	var next = function(){
		setTimeout(move,300);
	}
	
	var move=function(){
		x+=20;
		y+=20;
		var object = document.getElementById(elems[elem]);
		object.style.top = x+"px";
		object.style.left = y+"px";
		
		if(x<100+elem*60){
			setTimeout(move,50);
		}else{
			elem++;
			x=0;
			y=0;
		}
	}
	
	
	window.onload=function(e){
		var elem = document.getElementById("next");
		elem.onclick =  function(){
			next();
		}
	}
</script>
</head>
<body>
<p><a id="next" href="#">Next slide</a></p>

<div id="div1">Now is the time for all good wo-men to come to the aid of their country.</div>
<div id="div2">99 bottles of beer on the wall, 99 bottles of beer.<br>
Take one down, pass it around, 98 bottles of beer one....
</div>
<div id="div3">
web 2.0 web 2.0........................
so  cool....
<h2>Learning  javascript</h2>
</div>

</body>
</html>